{extend name='common/common' /}
{block name="style"}
<style media="screen">
.edui-default{
	line-height: 0;
}
</style>
{/block}
{block name="content"}
<el-row :gutter="15">
	<el-col :md="12">
		<el-card class="box-card">
			<div slot="header">
				<span class="span-primary"><i class="el-icon-plus"></i></span>
				添加文章
			</div>
			<el-form label-width="80px" :model="form" :rules="rules" ref="form" class="curForm">
				<el-form-item label="文章分类" prop="cate_name">
					<el-input v-model="form.cate_name" readonly @focus="selectCate" placeholder="请选择文章分类"></el-input>
				</el-form-item>
				<el-form-item label="文章标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="文章描述" prop="description">
					<el-input type="textarea" v-model="form.description" placeholder="请输入文章描述"></el-input>
				</el-form-item>
				<el-form-item label="关键词" prop="keywords">
					<el-tag
						:key="tag" closable
						v-for="tag in form.keywords"
						:disable-transitions="false"
						@close="handleClose(tag)">
						{{tag}}
					</el-tag>
					<el-input
						class="input-new-tag"
						v-if="inputVisible"
						v-model="inputValue"
						ref="saveTagInput"
						size="small"
						@keyup.enter.native="handleInputConfirm"
						@blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" icon="el-icon-plus" @click="showInput">
						添加关键词
					</el-button>
				</el-form-item>
				<el-form-item label="缩略图">
					<el-button @click="uploadAttach" size="small" icon="el-icon-plus">
						上传缩略图
					</el-button>
					<img :src="form.thumbnail" width="40" height="40" style="position:absolute;cursor:pointer;" @click="previewImg">
				</el-form-item>
				<el-form-item label="">
					<el-button @click='subForm("form")'>确认提交</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-col>
	<el-col :md="12">
		<el-card class="box-card">
			<div slot="header">
				<span class="span-primary"><i class="el-icon-edit-outline"></i></span>
				文章内容
			</div>
			<textarea id="container"></textarea>
		</el-card>
	</el-col>
</el-row>
{/block}
{block name="component"}
<div id="cateTreeBox">
	<el-dialog title="选择文章分类" :visible.sync="showCateTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="cateTreeData"
				:props="props"
				ref="cateTree"
				show-checkbox
				node-key="id"
				check-strictly="true"
				@check-change="toRadio">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showCateTree = false">取消</el-button>
			<el-button type="success" @click="sureCate">确定</el-button>
		</div>
	</el-dialog>
</div>
{/block}
{block name="script"}
<script src="__JS__/plugins/ueditor/ueditor.config.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
	        inputVisible: false,
	        inputValue: '',
			form:{
				title:'',description:'',
				keywords:[],thumbnail:'',
				content:'',
				cate_name:'',cate_id:''
			},
			rules:{
				title:[{required:true,message:'文章标题不能为空',trigger:['blur','change']}],
				description:[{required:true,message:'文章描述不能为空',trigger:['blur','change']}],
				keywords:[{required:true,message:'请添加关键词',trigger:['blur','change']}],
				content:[{required:true,message:'内容不能为空',trigger:['blur','change']}],
				cate_name:[{required:true,message:'请选择文章分类',trigger:['blur','change']}],
				cate_id:[{required:true,message:'请选择文章分类',trigger:['blur','change']}],
			}
		}
	},
	mounted:function(){
		this.editor = UE.getEditor('container',{
			initialFrameHeight:545,
		});
	},
	methods: {
		selectCate() {
			cateTree.getTreeData();
			cateTree.showCateTree = true;
		},
		handleClose(tag) {
			this.form.keywords.splice(this.form.keywords.indexOf(tag), 1);
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			if (inputValue) {
			  this.form.keywords.push(inputValue);
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		uploadAttach() {
			uploadAlert.is_show = true;
			uploadAlert.limit = 1;
			uploadAlert.upData = {
				'targetpath':'articleThumb/{:session("id")}'+new Date().getTime()
			}
		},
		upSuccess(res){
			this.form.thumbnail = res.data.path;
		},
		previewImg() {
			previewAlert.show = true;
			previewAlert.url = this.form.thumbnail;
		},
		subForm(form) {
			this.form.content = this.editor.getContent();
			this.$refs[form].validate((valid) => {
				if(valid){
					var param = this.form;
					$.post("{:url('articles/articleadd')}",param,function(res){
						if(res.code == 1){
							main.$confirm('文章添加成功', '成功', {
								confirmButtonText: '确定',
								showClose:false,
								type: 'success',
								showCancelButton:false
							}).then(() => {
								window.location.href = res.data;
							});
						}else{
							main.$notify.error({
								title:"错误",
								message:res.msg
							});
						}
					});
				}else{
					this.$notify.error({
						title:"错误",
						message:"请完善文章内容"
					});
				}
			})
		}
    }
});
var cateTree = new Vue({
	el:"#cateTreeBox",
	data() {
		return {
			showCateTree:false,
			cateTreeData:'',
			checkedTimes:0,
			props:{
				label:"name"
			}
		}
	},
	methods:{
		getTreeData() {
			main.loading = true;
			$.getJSON("{:url('articles/cate')}",function(res){
				main.loading = false;
				cateTree.cateTreeData = res.data;
			});
		},
		sureCate() {
			if(this.$refs.cateTree.getCheckedKeys().length == 0){
				main.$notify.error({
					title: '错误',
					message: "请选择分类"
				});
				return false;
			}
			var checkedNode = this.$refs.cateTree.getCheckedNodes()[0];
			main.form.cate_id = checkedNode.id;
			main.form.cate_name = checkedNode.name;
			this.showCateTree = false;
		},
		toRadio(data,checked, node) {
			this.checkedTimes++;
			if(this.checkedTimes%2==0){
			   if(checked){
				   this.$refs.cateTree.setCheckedNodes([]);
				   this.$refs.cateTree.setCheckedNodes([data]);
			   }else{
				   this.$refs.cateTree.setCheckedNodes([]);
			   }
			}
		}
	}
})
</script>
{/block}
